/* =========================================================
   Outcome Industries block
   File: wwwroot/css/outcome-industries.css
   Used by: Views/Partials/blocklist/Components/outcomeIndustriesBlock.cshtml
   ========================================================= */

.oc-ind {
  box-sizing: border-box;
  --oc-navy: #1b2a5b;
  --oc-dark: #0f1c3f;
  --oc-orange: #ff9a45;
  --oc-orange-text: #f7923a;
  --oc-card: #f8f8f8;
  --oc-tag: #e4e4e4;
  --oc-muted: #555b66;
  --oc-gutter: 6.8vw;

  width: 100%;
  background: #fff;
  padding: clamp(40px, 5vw, 128px) var(--oc-gutter) clamp(48px, 5.5vw, 140px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--oc-navy);
  -webkit-font-smoothing: antialiased;
}
.oc-ind *, .oc-ind *::before, .oc-ind *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- HEADER ---------- */
.oc-ind__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  column-gap: 4vw;
  align-items: start;
}
.oc-ind__eyebrow {
  font-size: clamp(11px, 0.88vw, 22px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.4vw, 36px);
}
.oc-ind h2 {
  font-weight: 600;
  font-size: clamp(22px, 2vw, 52px);
  line-height: 1.48;
  letter-spacing: normal;
  text-transform: none;
  color: var(--oc-navy);
  max-width: 42vw;
}
.oc-ind__intro {
  padding-top: clamp(0px, 2.6vw, 68px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(14px, 0.96vw, 25px);
  line-height: 1.3;
  max-width: 36vw;
}

/* ---------- GRID ---------- */
.oc-ind__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.76vw, 46px);
  margin-top: clamp(36px, 5.8vw, 150px);
  list-style: none;
}

.oc-ind__card {
  background: var(--oc-card);
  padding: clamp(16px, 1.45vw, 38px);
  min-height: clamp(200px, 17.3vw, 450px);
  cursor: pointer;
  outline: none;
  transition: background .25s ease;
}
.oc-ind__card:focus-visible { box-shadow: 0 0 0 3px var(--oc-orange); }

.oc-ind__tag {
  display: inline-block;
  /* background: var(--oc-tag); */
  color: #1a1a1a;
  font-size: clamp(9px, 0.64vw, 17px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.55em 0.9em;
  border-radius: 2px;
  margin-bottom: clamp(12px, 1.1vw, 28px);
  transition: background .25s ease, color .25s ease;
}

.oc-ind__label {
  font-size: clamp(13px, 0.96vw, 25px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--oc-orange-text);
}

.oc-ind__workflows {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, 0.86vw, 22px);
  line-height: 1.3;
  color: var(--oc-muted);
  padding-bottom: clamp(12px, 1.1vw, 28px);
  margin-bottom: clamp(12px, 1.1vw, 28px);
  border-bottom: 1px solid #e3e3e3;
  transition: color .25s ease, border-color .25s ease;
}

.oc-ind__changes {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, 0.86vw, 22px);
  line-height: 1.5;
  color: #1a1a1a;
  transition: color .25s ease;
}
.oc-ind__changes strong { font-weight: 700; color: var(--oc-navy); transition: color .25s ease; }

/* ---------- ACTIVE CARD (dark) ---------- */
.oc-ind__card.is-active { background: var(--oc-dark); }
.oc-ind__card.is-active .oc-ind__tag { background: var(--oc-orange); color: #fff; }
.oc-ind__card.is-active .oc-ind__workflows { color: #fff; border-color: #2a3c6e; }
.oc-ind__card.is-active .oc-ind__changes,
.oc-ind__card.is-active .oc-ind__changes strong { color: var(--oc-orange-text); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .oc-ind { --oc-gutter: 32px; }
  .oc-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-ind__card { min-height: 0; }
}
@media (max-width: 800px) {
  .oc-ind { --oc-gutter: 24px; }
  .oc-ind__head { grid-template-columns: 1fr; row-gap: 14px; }
  .oc-ind h2, .oc-ind__intro { max-width: none; }
  .oc-ind__intro { padding-top: 0; }
}
@media (max-width: 560px) {
  .oc-ind { --oc-gutter: 20px; }
  .oc-ind__workflows, .oc-ind__changes { font-size: 14px; }
  .oc-ind__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-ind * { transition: none !important; }
}